iOS 11 设计规范 | 第二章 App 架构-虎课网

相应辅助功能的偏好设置：如果你的App 使用了 UIKit，那么用户界面、文本、界面元素就会自动调整至你的偏好设置，例如自动加粗并且放大文字（译者注：iOS 设置中的字号设置）。当 “减弱动态效果” 的开关被打开，你的 App 也会适时检查并响应辅助功能的偏好设置。并且 App 所采用的自定义字体要和系统字体相匹配。

测试App的辅助功能：除了文字和动效的变化，辅助选项还能改变对比度、反转颜色、降低透明度等。当用户启用辅助功能时，可以观察到 App 在开启辅助功能后是如何表现和运作的。

包含隐藏式字幕（译者注：电视字幕）和口述影像：隐藏式字幕有助于听障以及听觉不灵敏的用户，观看视频中的对话和其它音频内容。口述影像为视力受损的用户提供了重要视频的口头解说。

2.2 加载

当内容在加载时，一片空白静止的屏幕，让你的App好像被冻结了一样，不仅让用户感到困惑和失望，而且很有可能会使用户离开你的App。

要清晰的表明加载的状态：至少，展示一个动态旋转图来表明有任务正在进行中。更好的做法是，显示更清晰明确的加载进度，这样用户就能知道他们还需等待多久。

加快显示内容的速度：不要让用户等着且只看到加载进度，要尽快显示内容，可以通过占位符、图形或者动画，表明哪些内容还未加载完成。当内容加载成功后，替换掉之前的占位元素。有可能的话，在播放动画或用户操作菜单、导航的过程中，就提前在后台预加载要显示的内容。

通过启发或娱乐用户来填充加载的过程：尝试一下展示游戏秘籍、娱乐性的动画或者其他有趣的占位图。

自定义加载画面：尽管有标准化的进度指示，但它们有时会不符合当前的使用场景。这时设计符合你的 App 或游戏风格的自定义动画和元素，可以实现更具沉浸式的使用环境。

2.3 模态框

模态框——是让用户只有在完成当前的任务或关闭一个信息或页面之后，才能去做其它的事情。操作列表、警告和动作视图都提供了模态框。当屏幕上出现模态框时，用户必须通过点击按钮或是其它特殊方式才能退出。例如在日历中编辑事件或是在Safari浏览器中选择书签。模态框可以占据整个屏幕、整个上级视图（比如气泡弹出框）、或者屏幕的一部分。模态框通常有 “完成” 和 “取消” 按钮来退出视图。

尽量减少模态框的使用：一般来说，用户更喜欢与App进行非线性的交互。只在必须要引起用户注意时、某个任务必须被完成或是主动关闭时、保存重要数据时才考虑使用模态框。

提供一个明显且安全的方式，退出模态框：确保用户在关闭模态框时，知道会导致的结果。

保持模态框的简单、简短且集中：不要在你的 App 中创建另一个 App。如果一个模态框太复杂，当用户看到时，就会忽略他们之前暂停的任务。当创建一个包含多层级视图的模态框时，请格外谨慎，因为用户可能不知道如何返回原先的步骤。如果模态框必须含有子视图，那就提供单级的跳转路径以及清楚的 “完成” 路径。避免在完成任务之外的地方使用 “完成” 按钮。

请尽量使用能够明确说明任务的标题：你还可以在视图的其它部分，更全面描述任务或者提供指示文本。

只有在传达关键以及需要操作的信息时才使用警告弹窗：警告弹窗会中断用户操作，并且需要点击才能关闭，所以要让用户认为这个打断是有必要的。

了解更多，请参阅Alerts。

尊重用户的推送通知偏好设置：在设置里，用户明确规定了他们想要如何接收来自你 App 的推送通知。App要遵循这些个人偏好，才不会让用户直接完全关闭掉你的推送。

不要在弹出框上方显示模态框：除了警告框，其他任何元素都不应该覆盖在弹出框之上。在极少数情况下，用户完成弹出框的指示后，还会显示模态框。那么，请先关闭弹出框，再展示模态视图。

让模态框的视觉风格与你的App相符：一个模态视图可能包含导航栏。在这种情况下，请使用与你App内的导航栏一样的视觉外观。

选择合适的模态框样式。你可以使用到以下任何一种样式：

全屏模式：覆盖整个屏幕。用于可以在模态视图中完成的较复杂的任务。（左）

页面模式：在大屏设备的横屏摆放时，模态框覆盖了部分内容，而未被遮盖的区域被模糊化处理，避免用户与之交互。在小屏设备的竖屏时覆盖整个屏幕，用于在模态框中完成的复杂的任务。(右)

表单模式：显示在屏幕中心，但是当键盘可见时，可能会改变位置。所有未被遮盖的区域被模糊处理，避免用户与之交互。可能会在小屏设备中覆盖整个屏幕，便于收集信息。（左）

当前视图模式：与上级视图大小一致。用于拆分视图窗口、弹出窗口或其他非全屏视图中显示模态内容。（右）

选择合适的过渡方式来显示模态框：使用与App风格相符的过渡方式，来加强用户对当前内容转变的认知。默认的过渡方式让模态框垂直地从屏幕底部向上滑出，然后在被关闭时向下滑。弹出样式是指模态框水平滑出，显示信息，看起来就好像模态框隐藏在当前视图的背后。当模态框被关闭时，原先的视图便重新滑回来。在你的App内部要使用统一的模态过渡方式。

了解更多模态框的实现方法，请参阅UIViewController和UIPresentationController。

2.4 导航（Navigation）

在一个 App 的导航栏达不到用户的预期时，他们往往是意识不到的。你的工作就是在不引起注意的情况下，创造一种能够适应结构和目的的导航。导航应该让用户觉得自然和熟悉，并且不应该主导界面或者抢走页面内容的风头。在iOS，主要有三种导航结构。

分层导航（Hierarchical Navigation）

在每个页面都只做一次选择，直到到达目标页面。要想到达另外的目标页面，你必须重回之前的步骤或是从头开始重新选择。“设置（Settings）”和“邮件（Mail）”就是采用这种导航结构。

扁平导航（Flat Navigation）

在不同的内容类别间切换。“音乐（Music）”和“App商店（App Store）”就是采用这种导航结构。

内容驱动或是体验驱动式导航（Content-Driven or Experience-Driven Navigation）

在内容中自由地转换，或是内容本身定义导航。游戏、阅读以及其它沉浸式App一般都采用这种导航结构。

有的App结合了多种导航形式。例如，采用了扁平导航的 App 也可能在每个类别里使用分层导航。

始终提供清晰的路径：用户应该一直知道他处于App的什么位置，以及如何去往下一个目标页面。无论导航的样式如何，都应该确保内容间的路径是合理的、符合预期的并且容易追溯的。一般来说，每个页面只提供一条路径。如果他们需要在多个情景下看到某一屏的内容，那么考虑采用操作列表、警告框、弹出层或是模态框的形式来展示这些内容。

了解更多内容，请参阅Action Sheets, Alerts, Popovers, 和Modality。

设计一个能够简单快速地访问内容的信息结构：合理地组织你的信息结构，保证只需要用最少次数的点击、滑屏和跳转就能访问相应的内容。

使用触摸手势来制造流畅感：让用户能轻松地在界面内跳转，而感受不到阻力。例如，你可以让用户在屏幕边界轻扫来返回到上一屏。

使用标准的导航组件：可能的话，使用标准的导航控件比如页面管理、底部栏、分段控件、表格视图、精选视图和分割视图。用户已经熟悉了这些控件，他们很自然地就知道如何玩转你的 App。

使用导航栏访问分层内容：导航栏内的标题能够显示当前的层级位置，使用返回按钮能够轻易地回到上一个位置。

了解更多指南，请参阅Navigation Bars。

使用底部栏来显示内容相符的类目或是功能模块：底部栏让用户能够快速简单地在不同类别中切换，而不受当前位置的限制。

了解更多指南，请参阅 Tab Bars。

当有多个显示同类型的内容的页面时，请使用页面控件：页面控件能够清楚地表示总页数，以及当前所在页。“天气（Weather）”App就使用了页面控件来显示不同地理位置的天气页面。了解更多指导，请参阅https://developer.apple.com/ios/human-interface-guidelines/controls/page-controls/Page Controls。

提示：分段控件和工具栏不具备导航功能。使用分段控件能够将信息整理到不同的类别。使用工具栏可以为当前内容提供交互控件。

2.5 用户引导（Onboarding）

App 的启动过程是你第一个接触和联系新老用户的时机。请设计一个快速、有趣并有启蒙意义的用户引导。

提供启动画面：在App打开时启动画面会在App加载初始内容的同时进行显示，让用户感觉你的App能够快速响应。因为这个画面很快就会被 App 的首页替代，所以除非出现有限制性的文字和可交互的元素外，它应该尽量与首页相似。

了解更多，请参阅 Launch Screen。

选择适当的显示方向启动用户引导页面：如果你的App同时支持竖屏和横屏模式，那么应该以设备当前的方向启动。如果你的App只在一个方向运行，则应该始终以该方向启动，并让用户旋转设备来使用。除非有迫不得已的原因，否则无论设备是向左旋转还是向右旋转，处于横屏模式的App都应该正确地适配方向。

快速响应：避免出现启动画面、菜单和说明时间过长，要让用户快速进入App。如果你的App需要教学或是介绍步骤，为用户提供一个跳过的选项，并且不要对老用户展示这些。

提前设想用户可能会需要的帮助：主动考虑用户何时会遇到麻烦。例如，一个游戏可以在暂停或是角色前进受阻时提供一些小秘籍。当用户错过启动画面时，让他们可以重新观看教程。

只在教程中展示最关键的内容：虽然为新用户提供引导没错，但是好的设计是不需要太多教学的，设计首先要确保App是易懂的。如果你的App需要过多的引导，那么请重新审视你的设计。

让学习过程变得有趣而且易于学习：让用户通过操作来学习比阅读一长串说明来的更有趣和有效。通过动效和交互循序渐进地教学。避免展示看起来似乎可以操作的屏幕截图作为教学说明。

避免在一开始就要求用户填写资料：用户会想要 App马上可以使用。App是为大多数人设计的，让少数想要更多服务的人，通过填写资料来满足更多需求。尽可能地从设备设置和默认设置，或者通过同步服务例如iCloud来获取信息。如果 App 必须要求用户填写资料，那么刚开始在 App 内提示用户，并让用户稍后在 App 设置中自行修改。

避免在App内显示接受许可协议和免责声明：在你的App被下载之前，直接在苹果商店显示接受许可协议和免责声明。如果你必须将这些东西放在你的App里，那么以一种自然的方式将其融入，避免干扰用户体验。

在你的App重新启动时，恢复之前已有的状态：不要让用户再操作一遍关闭或退出 App 之前的步骤。保存并且复原 App 的已有状态，这样用户就能继续上次他们未完成的操作了。

不要太快或是太频繁地要求用户对你的App评分：太快或是太频繁地要求评分会让人厌烦，并且会减少你收到的有用反馈的数量。为了鼓励填写有效的反馈，在要求评分之前，给用户足够的时间使用App。在评分时，始终提供“退出”的选项，并且永远都不要强迫用户对你的App进行评分。

不要鼓励重启：重新启动耗费时间，并且让你的App看起来既不可靠又不易用。如果你的App出现储存或者其它问题，导致它无法运行只能重启系统，那么你应该解决这些问题。

2.6 请求许可（Requesting Permission）

只有用户对App予以授权，App 才能获取用户的私人信息，比如当前位置、日历、联系人、提醒事项以及照片。虽然 App 获得这些信息后，用户使用起来会比较方便，但他们还希望能够掌控自己的私人数据。比如，用户希望能够根据实际位置自动标记照片，或是寻找附近的朋友，但是他们又同时希望能有关闭这些功能的选项。